<!-- 头部 -->
<script setup lang="ts">
import { useRouter } from "vue-router";
import { reactive, ref, onMounted } from "vue";
import pubsub from "pubsub-js";
import Login from "./login.vue";
import User from "./user.vue";
import { useCommpnStore } from "@/stores/common";
import { getUser } from "@/utils/local";
const router = useRouter();
const state: any = reactive({
    username: null,
    drawer: true,
    drawerVal: false,
    isMobile: false,
});
const loginRef: any = ref(null);
const userRef: any = ref(null);
const useStore = useCommpnStore();

pubsub.subscribe("updateUser", () => {
    updateUser();
});
onMounted(() => {
    console.log('router.currentRoute.value.path', router.currentRoute.value.path)
    updateUser();
    getClient();
    window.onresize = () => {
        getClient();
    };
});
//pc/移动适配
const getClient = () => {
    let width = document.body.clientWidth;
    if (width > 768) state.isMobile = false;
    else {
        state.drawerVal = false;
        state.isMobile = true;
    }
};
//更新用户信息
const updateUser = () => {
    const user: any = getUser()
    state.username = user?.username
};
//路由列表
const navlist: { name: String; icon: String; path: string | null }[] = [
    { name: "首页", icon: "HomeFilled", path: "/home" },
    { name: "分类", icon: "Filter", path: "/classify" },
    { name: "归档", icon: "Document", path: "/placeFile" },
    { name: "分享", icon: "Share", path: "/share" },
    { name: "收藏", icon: "Star", path: "/collect" },
    { name: "记录", icon: "Tickets", path: "/record" },
    { name: "留言", icon: "EditPen", path: "/leaveMsg" },
];
//页面跳转
const navTo = (path: any): void => {
    router.push(path);
    if (state.isMobile) {
        state.drawerVal = false;
    }
};
//登录/用户信息
const user = () => {

    if (state.username) userRef.value.open();
    else loginRef.value.open();
    if (state.isMobile) {
        state.drawerVal = false;
    }
};
</script>
<template>
    <i v-if="!router.currentRoute.value.path.includes('h5pDemo')" class="iconfont icon-mianbaoxie"
        @click="state.drawerVal = true"></i>
    <component v-if="!router.currentRoute.value.path.includes('h5pDemo')" :is="state.isMobile ? 'el-drawer' : 'div'"
        v-model="state.drawerVal" title="I am the title" :modal="true" :with-header="false" size="90px">
        <div class="aside-nav">
            <div class="logo">
                <img class="avatar" src="../assets/imgs/avatar.jpeg" alt="" />
            </div>
            <div v-for="item in navlist" @click="navTo(item.path)"
                :class="{ 'nav-item': true, active: router.currentRoute.value.path === item.path }">
                <component class="item-icon" :is="item.icon" :style="{ width: '1.2em', height: '1.2em' }"></component>
                <span class="item-name">
                    {{ item.name }}
                </span>
            </div>

            <div class="nav-item user" @click="user">
                <div v-if="!state.username" style="font-size: 1.2em; transform: translateY(2px)">
                    <el-icon>
                        <Sunny />
                    </el-icon>
                </div>
                <div style="font-size: 14px">{{ state.username ? state.username : "登 录" }}</div>
            </div>

            <div v-if="useStore.router.meta?.showReturn" class="nav-item return" @click="router.go(-1)"
                style="color: #2980b9">
                <div style="font-size: 1.2em; transform: translateY(2px)">
                    <el-icon>
                        <RefreshLeft />
                    </el-icon>
                </div>
                <span class="item-name"> 返回 </span>
            </div>

            <el-backtop :bottom="50" :right="20">
                <el-icon>
                    <SortUp />
                </el-icon>
            </el-backtop>
        </div>
    </component>
    <Login ref="loginRef" />
    <User ref="userRef" />
</template>
<style>
.el-drawer {
    box-shadow: none !important;
    border-left: 1px solid #e6e6e6;
}
</style>
<style scoped lang="scss">
.icon-mianbaoxie {
    position: fixed;
    right: 10px;
    top: 15px;
    z-index: 10;
    font-size: 26px;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    display: none;
}

.return {
    text-align: center;
}

@media (max-width: 768px) {

    //宽小于768显示面包屑
    .icon-mianbaoxie {
        display: flex !important;
    }
}

.aside-nav {
    width: 90px;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    background-color: #f5f6fa;
    z-index: 9;
    padding: 30px 10px;

    .logo {
        margin-bottom: 30px;

        img {
            width: 60px;
            height: 60px;
            border-radius: 999px;
            display: block;
            margin: auto;
        }
    }

    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #e6e6e6;
        transition: 0.3s;

        &:hover {
            color: #409eff;
        }
    }

    .active {
        color: #409eff;
    }
}
</style>
